<template>
	<!-- tab切换列表 -->
	<view>
		<u-subsection :list="list" mode="button" :current="type" @change="toggleActive"></u-subsection>
	</view>
	<!-- 列表 -->
	<block v-for="(item,i) in datalist" :key="i">
		<view class=" lose-list" @click="gotoDetail(item.id)">
			<view class="lose-item">
				<view class="img">
					<image :src="item.id.imgList[0]" mode=""></image>
				</view>
				<view class="lose-content">
					<h4>{{item.id.name}}</h4>
					<view class="region">{{item.id.region}}</view>
					<view class="date">{{item.id.date}}</view>
					<view class="desc">{{item.id.desc}}</view>
					<view class="pubtime">{{item.id.time}}</view>
				</view>
			</view>
		</view>
	</block>
	<view class="noList">
		<!-- 没有信息的 -->
		<text class="noList-text" v-if="listLength > 0">没有更多了呢</text>
		<!-- 有信息的 -->
		<text class="noList-text" v-else>还没有收藏信息呢</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	import {
		formatTime
	} from '../../utils/index.js';
	// 数据
	const type = ref(0)
	const list = ref(['寻主', '寻物'])
	const datalist = ref([])
	const listLength = ref(0)
	// 点击事件
	// 判断所点的按钮切换样式
	const openid = uni.getStorageSync('openid')
	const gotoDetail = (e) => {
		const info = {
			id: e._id,
		}
		uni.navigateTo({
			url: `/subpkg/lose-Detail/lose-Detail?_id=${info.id}`
		})
	}
	const toggleActive = (index) => {
		if (index === 0) {
			datalist.value = []
			type.value = index
			http.post('/getCollection', {
				openid: openid,
				type: type.value
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					item.id.time = formatTime(item.id.time)
					return item
				})
				listLength.value = 0
				listLength.value = datalist.value.length
			})
		} else if (index === 1) {
			datalist.value = []
			type.value = index
			http.post('/getCollection', {
				openid: openid,
				type: type.value
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					item.id.time = formatTime(item.id.time)
					return item
				})
				listLength.value = 0
				listLength.value = datalist.value.length
			})
		}
	}
	onLoad(() => {
		const openid = uni.getStorageSync('openid')
		http.post('/getCollection', {
			openid: openid,
			type: type.value
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				item.id.time = formatTime(item.id.time)
				return item
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		});
	});
	onPullDownRefresh(() => {
		const openid = uni.getStorageSync('openid')
		// datalist.value = []
		http.post('/getCollection', {
			openid: openid,
			type: type.value
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				item.id.time = formatTime(item.id.time)
				return item
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800)
	})
	onShow(() => {
		const openid = uni.getStorageSync('openid')
		http.post('/getCollection', {
			openid: openid,
			type: type.value
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				item.id.time = formatTime(item.id.time)
				return item
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		});
	})
</script>

<style lang="less">
	.noList {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.noList-text {
			color: rgba(126, 126, 126, 0.7);
			font-size: 15px;
		}
	}

	.lose-list {
		display: flex;
		flex-direction: column;

		.lose-item {
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 5rpx;
			box-sizing: border-box;
			width: 100%;

			image {
				width: 250rpx;
				height: 250rpx;
				min-width: 250rpx;
				border-radius: 20rpx;
			}

			.lose-content {
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				width: 100%;

				.region {
					margin-top: 35rpx;
					font-size: 26rpx;
				}

				.date,
				.desc {
					font-size: 26rpx;
					margin-bottom: 5rpx;
				}

				.desc {
					color: #666;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 400rpx;
				}

				.pubtime {
					margin-top: 30rpx;
					margin-left: auto;
					color: #666;
					font-size: 26rpx;
				}
			}
		}
	}
</style>